{% extends "base-left.html" %}
{% load staticfiles %}

{% block css %}
    <link href="{% static 'plugins/fullcalendar/fullcalendar.min.css' %}" rel="stylesheet"/>
    <link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/select2/select2.min.css' %}">
{% endblock %}

{% block content %}
    <section class="content-header margin-bottom">
        <ol class="breadcrumb">
            <li><a href="">办公平台</a></li>
            <li><a href="#">我的日报</a></li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="box box-primary">
            <div class="box-body no-padding">
                <!-- THE CALENDAR -->
                <div id="calendar">
                </div>
            </div>
            <!-- /.box-body -->
        </div>
    </section>

    <!-- /.content -->

{% endblock %}

{% block javascripts %}
    <script src="{% static 'plugins/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'plugins/fullcalendar/fullcalendar.min.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.js' %}"></script>
    <script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>

    <script type="text/javascript">
        $(function () {
            $('#DailyReport').addClass('active');
            $('#MyReport').addClass('active');

        });

    </script>

    <script type="text/javascript">
        function doCreate() {
            layer.open({
                type: 2,
                title: '新建日报',
                shadeClose: false,
                maxmin: true,
                area: ['800px', '460px'],
                content: "{% url 'myreport-create' %}",
                end: function () {
                    window.location.reload();
                }
            });
        }

        $(function () {
            //初始化FullCalendar
            $('#calendar').fullCalendar({
                buttonText: {
                    today: '今天',
                    month: '月',
                    week: '周',
                    day: '日',
                },
                allDayText: "全天",
                timeFormat: 'HH:mm',
                views: {
                    month: {titleFormat: 'YYYY年MMMM月'},
                    week: {titleFormat: 'YYYY年MMMM月'},
                    day: {titleFormat: 'YYYY年MMMM月D日'},
                },
                monthNames: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                monthNamesShort: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
                dayNames: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                dayNamesShort: ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                //defaultView: 'agendaWeek',
                // 新增内容：自定义按钮
                customButtons: {
                    reportAddButton: {
                        text: '添加',
                        click: doCreate,
                    },

                },
                contentHeight: 650,
                header: {
                    //日历头部左边：初始化切换按钮
                    left: 'prev,next today reportAddButton',
                    //日历头部中间：显示当前日期信息
                    center: 'title',
                    //日历头部右边：初始化视图
                    right: 'month,agendaWeek,agendaDay'
                },
                //设置是否显示周六和周日，设为false则不显示
                weekends: true,

                dayClick: function (date, view) {
                    layer.open({
                        type: 2,
                        title: '新建日报',
                        shadeClose: false,
                        maxmin: true,
                        area: ['800px', '500px'],
                        content: "/myreport/create?calDate=" + date.format("YYYY-MM-DD H:mm"),
                    });

                },
                eventClick: function (calEvent, jsEvent, view) {
                    layer.open({
                        type: 2,
                        title: '日报详情',
                        shadeClose: false,
                        maxmin: true,
                        area: ['800px', '460px'],
                        content: "/myreport/detail?id=" + calEvent.id,

                    });
                },
                events: [
                    {% for my_report in my_report_all %}
                        {
                            id: '{{ my_report.id }}',
                            title: '{{ my_report.content }}',
                            start: '{{ my_report.start_time | date:"Y-m-d H:i"}}',
                            end: '{{ my_report.end_time | date:"Y-m-d H:i"}}',
                            {% if my_report.category == '0'  %}
                                backgroundColor: '#0073b7',
                            {% elif my_report.category == '1' %}
                                backgroundColor: '#00a65a',
                            {% else %}
                                backgroundColor: '#dd4b39',
                            {% endif %}

                        },
                    {% endfor %}

                ],

            });
        });

    </script>
{% endblock %}